@extends('WShop::layout')
<style>
    .user-daishou .mui-fenlei .flex-item {
        padding: 5px 0;
        position: relative;
    }
</style>
@section('content')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">

            <div class="mui-table-view mui-table-view-chevron mui-bottom user-daishou">
                <div class="mui-fenlei bg-fff">
                    <div class=" mui-text-center flex ">
                        <div data-url="{{route('f_Wap_Upgrade_apply_record')}}" class="flex-item  {{$status===false?'swiper-slide-actives':''}}">全部  </div>
                        <div data-url="{{route('f_Wap_Upgrade_apply_record',['status'=>1])}}" class="flex-item {{$status==1?'swiper-slide-actives':''}}">待审核</div>
                        <div data-url="{{route('f_Wap_Upgrade_apply_record',['status'=>2])}}" class="flex-item {{$status==2?'swiper-slide-actives':''}}">审核通过</div>
                        <div data-url="{{route('f_Wap_Upgrade_apply_record',['status'=>3])}}" class="flex-item {{$status==3?'swiper-slide-actives':''}}">审核拒绝</div>

                    </div>
                </div>
                <div class="user-daishou-main active"  id="pull-load" data-currency="{{json_encode(config('shop.level'))}}">
                    @foreach($list as $item)
                    <div class="mui-daishou-list bg-fff">
                        <p class="mui-clearfix mui-text-center" >
                            <span class="mui-text-blue">
                                @if($item->status !=1)
                                    已审核
                                    @else
                                <img src="{{asset(config('view.frontend.wap_login').'/images/miaobiao.png')}}" alt="" width="20">
                                    <span
                                         class="time"
                                         data-msg = '正在审核,耐心等待'
                                         endtime='{{$item->cycle_at}}'>
                                            <span class="t_d"></span>
                                            <span class="t_h"></span>
                                            <span class="t_m"></span>
                                            <span class="t_s"></span>
									   </span>
                            @endif
                             </span>
                        </p>
                        <div class="daishou">
                            <p>{{$item->created_at}} </p>
                            <div><span class="red"></span>申请等级：
                              {{get_user_level($item->up_after_level)}}
                            </div>
                            <div><span class="black"></span>付款金额：{{$item->pay_money}}</div>
                        </div>

                        <div class="mui-text-right">
                            <a href="{{route('f_Wap_Upgrade_apply_match_detail',['id'=>$item->id])}}" class="mui-btn">查看信息</a>
                        </div>

                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @include('WShop::public.foot_bar',['active'=>'upgrade'])
@endsection
@push('scripts')
    <script src="{{asset(config('view.plugin').'/other/count-down.js')}}"></script>
    <script src="{{asset(config('view.plugin').'/other/day.js')}}"></script>
    <script>

        var btn=$('.mui-fenlei .flex-item')
        for (var i=0;i<btn.length;i++){
            btn[i].addEventListener('tap',function(){
                window.location.href =  $(this).data('url');
            })
        }

        var goodsItemTpl = '<div class="mui-daishou-list bg-fff">\n' +
            '<p class="mui-clearfix mui-text-center" >' +
            '<span class="mui-text-blue"><img src="{{asset(config('view.frontend.wap_login').'/images/miaobiao.png')}}" alt="" width="20"> '+
            '<span class="time" data-msg = "正在审核,耐心等待"' +
            '     endtime="{%endtime%}">' +
            '     <span class="t_d"></span><span class="t_h"></span><span class="t_m"></span><span class="t_s"></span>' +
            ' </span></span></p>' +
            '<div class="daishou">\n' +
            '<p>{%created_at%}</p>' +
            '<div><span class="red"></span>申请级别：{%money%}  </div>\n' +
            '<div><span class="black"></span>付款金额：{%income%}</div>\n' +
            '<div class="mui-text-right"> <a href="{%url%}" class="mui-btn">查看信息</a> </div>\n' +
            '</div></div></div>';

        var pageNum = 1;
        var mType = $('#pull-load').data('currency');
        mui.init({
            pullRefresh : {
                container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                up : {
                    style: 'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                    color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                    height: '50px',//可选,默认50px.下拉刷新控件的高度,
                    range: '100px', //可选 默认100px,控件可下拉拖拽的范围
                    offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
                    contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                    auto: false,//可选,默认false.首次加载自动上拉刷新一次
                    callback: function () {
                        pageNum = pageNum+1;
                        url = handleUrl(pageNum);
                        $.ajax({
                            type: 'get',
                            url: url,
                            dataType: 'json',
                        }).done(function (response) {

                            if(response.status){
                                data = response.data.list;
                                var len = data.length;
                                if(len<1){
                                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                                    mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
                                    return true;
                                }
                                for (var i=0; i<len; i++){
                                    var dateObj = dayjs(data[i]['cycle_at']*1000);
                                    var goodsItem = goodsItemTpl;
                                    var income = data[i]['pay_money'];

                                    var payMoney = mType[data[i]['up_after_level']]

                                    var url = "{{route('f_Wap_Upgrade_apply_match_detail')}}?id="+data[i]['id'];

                                    goodsItem = goodsItem.replace('{%endtime%}',dateObj.format('YYYY-MM-DD HH:mm:ss'))
                                        .replace('{%money%}',payMoney)
                                        .replace('{%created_at%}',dayjs(data[i]['created_at']*1000).format('YYYY-MM-DD HH:mm:ss'))
                                        .replace('{%income%}',income)
                                        .replace('{%url%}',url)
                                    $("#pull-load").append(goodsItem);
                                    $('.time').countDown({
                                        dayClassName:'t_d',
                                        hourClassName:'t_h',
                                        minClassName:'t_m',
                                        secClassName:'t_s',
                                        isDay:true,
                                    });
                                }
                            }
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
                            mui('#pullrefresh').pullRefresh().refresh(true);
                        }).fail(function (XMLHttpRequest) {
                            tooltips('网络异常,请检查连接');

                        }).always(function () {

                        });

                    }
                }
            }
        });

        function handleUrl(pageNum) {
            var url = window.location.href;
            if(url.indexOf("page_num=") >= 1){
                var u = url.split("page_num=");
            }else{
                if(url.indexOf("?") >= 1){
                    url = url+"&page_num="+pageNum;
                }else{
                    url = url+"?page_num="+pageNum;
                }
            }
            if(u) {
                var e = u[1].split("&");
                var d="";
                if(e.length > 1){
                    for(var i=0;i<e.length-1;i++){
                        d += "&"+e[i+1];
                    }
                }
                var url = u[0] + "page_num=" + pageNum+d;
            }

            return url
        }
    </script>
    <script>
        $('.time').countDown({
            dayClassName:'t_d',
            hourClassName:'t_h',
            minClassName:'t_m',
            secClassName:'t_s',
            isDay:true,
        });
    </script>
@endpush